import React, { useEffect } from 'react';
import MenuBarItem from './menuBarItem/MenuBarItem';
import './MenuBar.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';

function MenuBar(props) {
    let { menuBarData } = props;

    return (
        <div className="menu-bar">
            <div className="menu-bar1">
                <Swiper
                    modules={[Pagination]}
                    pagination={{ clickable: true }}
                >
                    <div className="swiper-container-menu">
                        {/* swiper  */}
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <SwiperSlide key="0">
                                    <MenuBarItem menuBarData={menuBarData.list1}></MenuBarItem>
                                    <MenuBarItem menuBarData={menuBarData.list2}></MenuBarItem>
                                </SwiperSlide>
                            </div>
                            <div className="swiper-slide">
                                <SwiperSlide key ="1">
                                    <div className="div">
                                    <MenuBarItem menuBarData={menuBarData.list4}></MenuBarItem>
                                    <MenuBarItem menuBarData={menuBarData.list3}></MenuBarItem>
                                    </div>
                                </SwiperSlide>
                            </div>
                        </div>
                        <div className="swiper-scrollbar-menu"></div>
                    </div>
                </Swiper>
            </div>
        </div>

    )
}

export default MenuBar
